import { action, autorun, makeObservable, observable } from "mobx";

export type Image = {
    name: string;
    url: string;
};

export type Item = Image & {
    type: "image" | "atlas" | "subTexture";
    subTexture?: Image[];
    isOpen?: boolean;
};

export class ResourceStore {
    resources: Item[] = [];
    imageFiles: File[] = [];
    curSelected: number | null = null;

    constructor() {
        makeObservable(this, {
            addImage: action,
            resources: observable,
            imageFiles: observable,
            clearImage: action,
            curSelected:observable,
            setCurSelected:action,
        });

        autorun(() => {
            console.log("autorun 2", this.imageFiles.length);
            const fileReaders: FileReader[] = [];
            let isCancel = false;
            if (this.imageFiles.length) {
                const promises = this.imageFiles.map((file: any) => {
                    return new Promise((resolve, reject) => {
                        const fileReader = new FileReader();
                        fileReaders.push(fileReader);
                        fileReader.onload = (e: any) => {
                            const { result } = e.target;
                            if (result) {
                                resolve({
                                    url: result,
                                    name: file.name,
                                });
                            }
                        }
                        fileReader.onabort = () => {
                            reject(new Error("File reading aborted"));
                        }
                        fileReader.onerror = () => {
                            reject(new Error("Failed to read file"));
                        }
                        fileReader.readAsDataURL(file);
                    })
                });

                Promise
                    .all(promises)
                    .then(images => {
                        if (!isCancel) {
                            images.map((item: any) => {
                                this.resources.push(
                                    {
                                        type: "image",
                                        name: item.name,
                                        url: item.url,
                                    }
                                );
                            })
                        }
                    })
                    .catch(reason => {
                        console.log(reason);
                    });
            };
            return () => {
                isCancel = true;
                fileReaders.forEach(fileReader => {
                    if (fileReader.readyState === 1) {
                        fileReader.abort()
                    }
                })
            }
        });
    }

    public addImage(imageFiles: File[]) {
        imageFiles.map((image) => {
            this.imageFiles.push(image);
        })

    }

    public clearImage() {
        this.imageFiles.length = 0;
    }

    public setCurSelected(idx:number)
    {
        this.curSelected = idx;
    }

}

export default new ResourceStore();
